import React, {Component} from 'react';
import { useHistory } from "react-router-dom";  
import http from "../../model/http";  

import Btn from "../../components/btn/Btn";
import code from "../../model/code"
import { Button,Radio,List,Modal, InputItem, Toast } from 'antd-mobile'
import './informationSettings.less'; 
const RadioItem = Radio.RadioItem;
class InformationSettings extends Component{
    constructor(props){
        super(props)
        this.state = {
            iphoneInputList: [1],
            iphoneRadio1: 1,
            radioValue: 1,
            userName:'',
            phoneList:[ ],
            requesting:false,
        }
        window.localStorage.clear()  

    
        setTimeout(() => {
            code.getUser();

            // 获取记录
            this.getRecord()

        }, 10);

    }
    showVal = (value,name) => {
        console.log(name,value)
        this.setState({
            [name]: value
        })
    }
    getRecord=async ()=>{
        this.setState({
            requesting:true
        })
        // http://wxwork.gzsg.cn/wxwork/manager/userPhoneList?userId=LiHao&hosId=1
        const list = await http.post('/manager/userPhoneList') 
        
        console.log("list",list)
        this.setState({
            phoneList:list.data,
            requesting:false
        })


    }
    add = () =>{
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ 
        if(!this.state[`iphone${this.state.iphoneInputList[this.state.iphoneInputList.length - 1]}`]){
            Toast.fail('请输入正确的手机号')
            return false
        }
        if (!reg.test(this.state[`iphone${this.state.iphoneInputList[this.state.iphoneInputList.length - 1]}`].replace(/\s*/g, ''))) {
            Toast.fail('请输入正确的手机号')
            return false
        } 
         
        this.setState({
            iphoneInputList: [...this.state.iphoneInputList, this.state.iphoneInputList[this.state.iphoneInputList.length - 1] + 1],
            [`iphoneRadio${this.state.iphoneInputList[this.state.iphoneInputList.length - 1] + 1}`]: 1,
        })
    }
    
    submit = async () => { 
        const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/ 
        for(let i = 0; i< this.state.iphoneInputList.length;i++){
            if(!this.state[`iphone${this.state.iphoneInputList[i]}`]){
                // Toast.fail('请输入正确的手机号')
                // return false
            }else{
                if (!reg.test(this.state[`iphone${this.state.iphoneInputList[i]}`].replace(/\s*/g, ''))) {
                    Toast.fail('请输入正确的手机号')
                    return false
                }
            }
            
        }
        let tValue = this.state.userName.replace(/\s*/g, '')
        if (tValue != tValue.replace(/[^\u4E00-\u9FA5]/g,'') || tValue == ''){
            Toast.fail('请输入真实姓名')
            return false
        }
        console.log(this.state)

        let arr = []
        this.state.iphoneInputList.map(item => {
            if(this.state[`iphone${item}`]){
                arr.push({
                    phone: this.state[`iphone${item}`].replace(/\s*/g, ''), 
                    type: this.state[`iphoneRadio${item}`]
                })
            } 
        }) 
        if(arr.length < 1){
            Toast.fail('请输入手机号码')
            return false
        }
        console.log(arr) 
         
        const addSubmit = await http.post('/manager/userInfoSet',{ 
            userName: this.state.userName.replace(/\s*/g, ''),
            jsonstr: JSON.stringify(arr).toString()
        }) 
        if(addSubmit.code == 0){
            Toast.success(addSubmit.msg)  
            // this.setState({
            //     iphoneInputList: [1],
            //     iphone1: '',
            //     iphoneRadio1: 1,
            //     radioValue: 1,
            //     userName:''
            // })
        
           

            setTimeout(() => {
                // window.close()
                 this.getRecord()
            }, 1000);
        }else{
            Toast.fail(addSubmit.msg)
        }
        console.log(addSubmit)
  
    }
    deleteIt =async(item) =>{
        Modal.alert('提示', '确定删除吗？', [
            { text: '取消' },
            {
              text: '确定', onPress: async () => {
               

                // http://wxwork.gzsg.cn/wxwork/manager/delUserPhone?userId=LiHao&hosId=1&phone=18951835269
                 const delResult = await http.post('/manager/delUserPhone',{ 
                   phone:item.phone
                })
                if(delResult.code == 0){
                  Toast.success(delResult.msg) 
                  setTimeout(() => {
                    this.getRecord()
                  }, 500);  
                }else{
                  Toast.fail(delResult.msg)
                }


              }
            }
          ])
    }
    radioChange = (item, name) => {
        console.log(item)
        this.setState({
            radioValue: item
        })
    }
    userNameChange = (value) => {
        this.setState({
            userName: value
        })
    }
    render(){
        return(
            <div className='v-informationSettings'>
                <List renderHeader={() => '信息设置'}>
                    <InputItem 
                        value={this.state.userName} 
                        type="text"
                        placeholder="请输入真实姓名"
                        onChange={(value) => this.userNameChange(value)}
                    >姓名</InputItem>
                    {this.state.iphoneInputList.map(item => (
                        <div className="big-box">
                            <span>手机号码</span>
                            <div className="box-input-style">
                                <InputItem    
                                    onChange={(value) => this.showVal(value,`iphone${item}`)}
                                    type="phone"
                                    placeholder="请输入手机号码"
                                ></InputItem>
                            </div>
                            <div className="box-radio-right">
                                <div className="box-footer-input">
                                     
                                    <div className="small-box">
                                        <div className="check-time-box" onClick={() => this.showVal(1, `iphoneRadio${item}`)}>
                                            <span>工作</span>
                                            <Radio className="my-radio" defaultChecked={true} key={1} checked={this.state[`iphoneRadio${item}`] === 1}  
                                           
                                            
                                            ></Radio>
                                            
                                        </div>
                                        <div className="check-time-box" onClick={() => this.showVal(2, `iphoneRadio${item}`)}>
                                            <span>私人</span>
                                            <Radio className="my-radio" key={2} checked={this.state[`iphoneRadio${item}`] === 2} ></Radio>
                                        </div>
                                    </div>
                                </div>
                                {/* <RadioItem key={item} checked={this.state.radioValue === item} onChange={() => this.radioChange(item)}></RadioItem> */}
                            </div>
                            <div className="clear"></div>
                             
                            
                           
                           
                        </div>
                        
                        
                    ))}
                    {/* <Btn style={{with:'75%'}} type='primary' onClick={this.add} >新增手机号</Btn> 
                    <Btn style={{with:'75%'}} type='warning' onClick={this.submit} >提交</Btn>  */}


                    







                    <Button type="warning" className="btn-class"  onClick={this.add}>新增手机号</Button>
                    
                    <Button type="warning" className="btn-class" onClick={this.submit} >提交</Button>
              
                </List>
                {/* <Button className="submit-style" type="warning" onClick={this.submit}>提交</Button>          */}
                <div className='phoneListHead' style={{"fontSize":"14px"}}>
                    <div className='flexRow cell'>
                            <div className='flex1 tc'>类型</div>
                            <div className='flex1 tc'>电话</div>
                            <div className='flex1 tc'>姓名</div>
                            <div className='flex1 tc'>操作</div>
                        </div>
                    </div>

                <div className='phoneList' style={{"fontSize":"14px"}}>
                   
                    {
                        this.state.phoneList.length > 0  &&   this.state.phoneList.map(item=>(
                            <div className='flexRow cell1'>
                                <div className='flex1 tc'>{item.type_name}</div>
                                <div className='flex1 tc'>{item.phone}</div>
                                <div className='flex1 tc'>{item.user_name}</div>
                                {/* onClick={this.deleteIt(item)} */}
                                <div className='flex1 tc' onClick={()=>{ this.deleteIt(item)  }}  >删除</div>
                            </div>
                        ))
                    }

                    {
                         (this.state.phoneList.length == 0  && this.state.requesting)  ? (
                            <div style={{textAlign:'center',marginTop:"120px"}}> 请稍后 </div>
                         ) :null
                    }

                    {
                         (this.state.phoneList.length == 0  && !this.state.requesting)  ? (
                            <div style={{textAlign:'center',marginTop:"120px"}}> 无数据 </div>
                         ) :null
                    }




                </div>
           
           
            </div>
        )
    }
}

 

export default InformationSettings;